<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Justification</title>
    <style>
        @page {
            size: 220px;
            margin: 20px;
        }
        :root {
            text-align: justify;
            font-family: Helvetica, Arial, sans-serif;
            font-size: 16px;
            line-height: 18px;
            widows: 1;
            orphans: 1;
        }
        body {
            outline: blue dashed 1px;
            width: 165px;
        }
        p::first-line {
            color: blue;
        }
        p {
            margin: 0;
        }
        .hyphens {
            hyphens: auto;
        }
        .no-hyphens {
            hyphens: none;
        }
        .float {
            border: orange solid;
            width: 30px;
            padding: 3px;
            margin: 3px;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .page-float {
            border: orange solid;
            box-sizing: border-box;
            width: 100%;
            height: 100px;
            padding: 3px;
            float-reference: page;
            float: bottom;
        }
    </style>
</head>
<body>
<p class="hyphens">
Justify justify and justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify &amp; justify justify justify justify justify justify justify.
</p>
<p class="no-hyphens">
    Justify justify and justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify &amp; justify justify justify justify justify justify justify.
</p>
<p class="no-hyphens">
  Justify justify justify justify justify justify justify justify justify <span>justify</span> justify justify justify justify justify.
</p>
<div class="left float">left float</div>
<p class="hyphens">
  Justify justify justify justify justify justify justify justify.
</p>
<div class="right float">right float</div>
<p class="hyphens" style="break-after: page">
  Justify justify justify justify justify justify justify justify.
</p>
<span class="page-float">page bottom float</span>
<p class="no-hyphens">
  Justify justify justify justify justify justify justify justify justify justify justify justify justify justify.
</p>
</body>
</html>
